<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.message {
  height: 100%;

  .message-header {
    width: 10rem;
    height: 1.2rem;
    @include flex-center;
    border-bottom: 0.5px solid rgba(41, 40, 37, 0.8);

    ul {
      width: 9rem;
      height: 1.2rem;
      @include flex-space-between-center;
      color: $color-white;

      li {
        font-size: .45rem;
      }

      li:nth-child(2) {
        margin-left: 1.4rem;
      }
    }
  }

  .message-list {
    width: 10rem;
    height: 2.0533rem;
    background-color: orange;
  }
}
</style>
<template>
  <div class="message">
    <div class="message-header">
      <ul>
        <li></li>
        <li>消息</li>
        <li>联系人</li>
      </ul>
    </div>
    <!-- 消息列表 -->
    <div class="message-list">
      <ul>
        <li>
          <span><i class="iconfont icon-fensishu"></i></span>
          <p>粉丝</p>
        </li>
        <li>
          <span><i class="iconfont icon-fensishu"></i></span>
          <p>粉丝</p>
        </li>
        <li>
          <span><i class="iconfont icon-fensishu"></i></span>
          <p>粉丝</p>
        </li>
        <li>
          <span><i class="iconfont icon-fensishu"></i></span>
          <p>粉丝</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>

</script>